{% extends "administrative/base.html" %}

{% block page_link %}
    <script src="../../static/administrative/js/modify_cars.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../static/announcements/css/style.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <script src="../../static/public_file/js/wangEditor.min.js" type="text/javascript" charset="UTF-8"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .switch-btn {
            cursor: pointer;
            width: 50px;
            height: 25px;
            position: relative;
            border: 1px solid #dfdfdf;
            background-color: #CFCFCF;
            box-shadow: #dfdfdf 0 0 0 0 inset;
            border-radius: 15px;
            background-clip: content-box;
            display: inline-block;
            -webkit-appearance: none;
            user-select: none;
            outline: none;
        }
        .switch-btn:before {
            content: '';
            width: 23px;
            height: 23px;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 20px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
        }
        .switch-btn:checked {
            border-color: #56b0d4;
            box-shadow: #56b0d4 0 0 0 16px inset;
            background-color: #56b0d4;
        }
        .switch-btn:checked:before {
            left: 26px;
        }
        .switch-btn.switch-btn-animbg {
            transition: background-color ease .4s;
        }
        .switch-btn.switch-btn-animbg:before {
            transition: left .3s;
        }
        .switch-btn.switch-btn-animbg:checked {
            box-shadow: #dfdfdf 0 0 0 0 inset;
            background-color: #56b0d4;
            transition: border-color .4s, background-color ease .4s;
        }
        .switch-btn.switch-btn-animbg:checked:before {
            transition: left .3s;
        }
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #78C3F3;
            color: #00688B;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
        input{
            padding: 8px 10px 8px 40px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="vehicle_information.html" style="color: #0b0b0b;">
                <i class="iconfont icon-xinwen1"></i>
                <span> 车辆管理</span> <span> > </span> <a href="modify_cars.html"> 编辑车辆</a>
            </a>
        </div>

{#        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;margin-right: 2%;">#}
{#            <button onclick="Confirm_Preview()" data-toggle="modal" data-target=".bd-example-modal-sm" style="height: 30px;width: 90%" type="button" class="btn btn-info add-station1">预览</button>#}
{#        </div>#}

        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button style="height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px" id="add_station" type="button" class="btn btn-default add-station" onclick="modify_car_content()">保存</button>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 93%;padding: 0 30px 0 15px;overflow: auto;">
        <div style="margin-top: 3%;width: 100%;">
            <span style="color: red;">*</span>
            <label> 车&nbsp&nbsp&nbsp&nbsp牌</label>
            <input id="car_license_plate" class="form-control section-input" type="text" placeholder=" 车辆牌照号码,必填" style="width: 40%;padding-left: 0.5%" value="{{ car_license_plate }}">
            <span style="color: red;">&nbsp&nbsp&nbsp&nbsp*</span>
            <label> 型&nbsp&nbsp&nbsp&nbsp号</label>
            <input id="car_model" class="form-control section-input" type="text" placeholder=" 车辆具体型号,必填" style="width: 40%;padding-left: 0.5%" value="{{ car_model }}">
        </div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;">&nbsp&nbsp</span>
            <label> 颜&nbsp&nbsp&nbsp&nbsp色</label>
            <input id="car_color" class="form-control section-input" type="text" placeholder=" 车辆的颜色" style="width: 40%;padding-left: 0.5%" value="{{ car_color }}">
             <label> &nbsp&nbsp&nbsp&nbsp购买日期</label>
            <input id="purchase_date" class="form-control section-input" type="text" placeholder=" 购买日期,格式为xxxx-xx-xx,用-分隔，例如：2021-01-01" style="width: 40%;padding-left: 0.5%"  value="{{ purchase_date }}">
        </div>

         <div style="margin-top: 2%;width: 100%;">
              <span style="color: red;">&nbsp&nbsp</span>
            <label> 车身号</label>
            <input id="car_body_number" class="form-control section-input" type="text" placeholder=" 车架号码" style="width: 40%;padding-left: 0.5%" value="{{ car_body_number }}">
             <label> &nbsp&nbsp&nbsp&nbsp发动机号</label>
            <input id="engine_number" class="form-control section-input" type="text" placeholder=" 发动机号码" style="width: 40%;padding-left: 0.5%"  value="{{ engine_number }}">
        </div>

         <div style="margin-top: 2%;width: 100%;">
             <span style="color: red;">&nbsp&nbsp</span>
            <label> 司&nbsp&nbsp&nbsp&nbsp机</label>
            <input id="car_driver" class="form-control section-input" type="text" placeholder=" 司机姓名" style="width: 40%;padding-left: 0.5%" value="{{ car_driver }}">
             <label>  &nbsp&nbsp&nbsp&nbsp车辆类型</label>
            <input id="car_type" class="form-control section-input" type="text" placeholder=" 车辆的类型" style="width: 40%;padding-left: 0.5%" value="{{ car_type }}">
        </div>

        <div style="margin-top: 2%;width: 100%;">
              <span style="color: red;">&nbsp&nbsp</span>
            <label> 初检日</label>
            <input id="initial_inspection_date" class="form-control section-input" type="text" placeholder=" 初次检验日,格式为xxxx-xx-xx,用-分隔，例如2021-01-01" style="width: 40%;padding-left: 0.5%" value="{{ initial_inspection_date }}">
             <label> &nbsp&nbsp&nbsp&nbsp车辆状态</label>
            <input id="car_status" class="form-control section-input" type="text" placeholder=" 车辆状态" style="width: 40%;padding-left: 0.5%" value="{{ car_status }}">
        </div>

        <div style="margin-top: 2%;width: 100%;">
           <span style="color: red;">&nbsp&nbsp</span>
            <label> 备&nbsp&nbsp&nbsp&nbsp注</label>
             <input id="marks" class="form-control section-input" type="text" placeholder=" 备注" style="width: 40%;padding-left: 0.5%" value="{{ marks }}">
{#             <label> &nbsp&nbsp&nbsp&nbsp车辆图片：</label>#}
{#            <input id="notice-date" class="form-control section-input" type="datetime-local" style="width: 40%;">#}
{#                <a href="{{ img_path }}" id="img_path">{{ img_name }}</a>#}
{#                <img src="{{ img_path }} " height="200" width="200">#}
        </div>



        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;visibility: hidden;">*</span>
            <label style="vertical-align: top;"> 车辆图片</label>
            <img src="{{ img_path }} " height="200" width="300">

        </div>

         <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;visibility: hidden;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp替换图片:</span>
            <a href="javascript:;" class="file" style="display: inline-block;vertical-align: top;">
                <i class="iconfont icon-upload"></i>
                上传或替换车辆图片
                <input type="file" name="myfile" id="myfile" onchange="Upload_img()">
            </a>

            <div id="cover-img" style="width: 33%;height: 300px;border: #cfcfcf solid 1px;margin-top: 1%;overflow: auto;display: none;">
                <img style="width: 100%;height: 298px;" id="cover-size" src="" alt="">
            </div>
        </div>

         <div><a href="#"><span id="car_id" style="visibility:hidden">{{ car_id }}</span></a></div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;visibility: hidden;">*</span>
            <label style="vertical-align: top;"> 会议纪要</label>
            <a href="javascript:;" class="file" style="display: inline-block;vertical-align: top;">
                上传附件
                <input type="file" name="accessory" id="accessory" onchange="upload_car_file()">
            </a>
            <button style="height: 30px;width: 8%;background: #D0EEFF;color: #1E88C7;border-radius: 4px;border: 1px solid #99D3F5;" id="add_station" type="button" class="btn btn-default add-station">删除附件</button>
        </div>
        <br>

        <table class="table table-hover table-bordered" style="width: 91%;">
            <thead>
            <tr>
                <th scope="col" style="width: 5%;">序号</th>
                <th scope="col" style="width: 20%;">文件名</th>
                <th scope="col" style="width: 20%;">文件大小</th>
                <th scope="col" style="width: 20%;">上传人</th>
                <th scope="col" style="width: 20%;">操作</th>
            </tr>
            </thead>
            <tbody style="overflow: auto;" id="t_table"></tbody>
        </table>

        <div style="height: 50px;">

        </div>
    </div>
    <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="margin-top: 10%;">
            <div class="modal-content" style="height: 150px;border-radius: 7px;width: 300px;background: #F8F8FF;border: #1E90FF solid 1px;">
                <div class="modal-header" style="height: 40px;background: #1E90FF;border-top-left-radius: 7px;border-top-right-radius: 7px;">
                    <h5 class="modal-title" style="line-height: 40px;width: 40%;text-align: center;color: #ffffff;">
                        提示对话框
                    </h5>
                    <button id="close-model2" type="button" class="close" data-dismiss="modal" aria-label="Close" style="margin-right: 3%;line-height: 40px;">
                        <span aria-hidden="true" style="font-size: 28px;color: white;">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 50px;line-height: 60px;text-align: center;">
                    <p id="Confirm-content"></p>
                </div>
                <div class="modal-footer" style="height: 40px;">
                    <button id="countersign" type="button" class="btn btn-primary" aria-label="Close"
                            style="margin-left: 2%;margin-right: 2%;background: #1E90FF;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;确&nbsp;认&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>


{% endblock %}




{% block script %}
    <script>
        function click_ul_9() {
            if (document.getElementById("jiantou5").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator-1").style.display = "inline-block";
            }else {
                document.getElementById("jiantou5").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator-1").style.display = "none";
            }
        }

        function click_ul_10() {
            if (document.getElementById("jiantou4").className === "iconfont icon-jiantou-shang"){
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-xia";
                document.getElementById("dispatch-Administrator").style.display = "inline-block";
            }else {
                document.getElementById("jiantou4").className = "iconfont icon-jiantou-shang";
                document.getElementById("dispatch-Administrator").style.display = "none";
            }
        }
    </script>
{% endblock %}
